<template>
    <div class="infoContainer">
        <div class="title">
            环境概要
        </div>
        <div class="content">
            <div class="row">
                <div class="title">设备名称</div>
                <div class="val">{{formData.deviceName}}</div>
            </div>
            <div class="row">
                <div class="title">浏览器</div>
                <div class="val">{{formData.browser}}</div>
            </div>
            <div class="row">
                <div class="title">User-Agent</div>
                <div class="val">{{formData.userAgent}}</div>
            </div>
            <div class="row">
                <div class="title">时区</div>
                <div class="val">{{formData.timeZone}}</div>
            </div>
            <div class="row">
                <div class="title">WebRTC</div>
                <div class="val">{{formData.webRTC}}</div>
            </div>
            <div class="row">
                <div class="title">地理位置</div>
                <div class="val">{{formData.location}}</div>
            </div>
            <div class="row">
                <div class="title">语言</div>
                <div class="val">{{formData.language}}</div>
            </div>
            <div class="row">
                <div class="title">分辨率</div>
                <div class="val">{{formData.resolution}}</div>
            </div>
            <div class="row">
                <div class="title">Canvas</div>
                <div class="val">{{formData.canvas}}</div>
            </div>
            <div class="row">
                <div class="title">WebGL</div>
                <div class="val">{{formData.webgl}}</div>
            </div>
            <div class="row">
                <div class="title">WebGL数据</div>
                <div class="val">{{formData.webGLCorp}}{{formData.webGLRender}}</div>
            </div>
            <div class="row">
                <div class="title">AudioContext</div>
                <div class="val">{{formData.audioContext}}</div>
            </div>
            <div class="row">
                <div class="title">SpeechVoice</div>
                <div class="val">{{formData.speechVoice}}</div>
            </div>
            <div class="row">
                <div class="title">媒体设备</div>
                <div class="val">{{formData.mediaDevice}}</div>
            </div>
            <div class="row">
                <div class="title">并发</div>
                <div class="val">{{formData.concurrent}}</div>
            </div>
            <div class="row">
                <div class="title">内存</div>
                <div class="val">{{formData.mem}}</div>
            </div>
            
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted,reactive, computed, defineProps, defineEmits, watch} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {genEnvInfo} from './Utils/EnvGenerator'


const props = defineProps({
    data: Object
})

const formData = ref({
    deviceName: "",
    browser:"",
    userAgent: "",
    timeZone: "",
    webRTC: "",
    location: "",
    language: "",
    resolution: "",
    canvas: "",
    webgl: "",
    webGLCorp:"",
    webGLRender:"",
    audioContext:"",
    mediaDevice:"",
    concurrent:"",
    mem:"",
    speechVoice:""

})
watch(()=> props.data,() => {
    console.log('props.data change', props.data);
    // 生成概要信息
    formData.value = props.data as never;
},{
    immediate:true,
    deep:true
});



</script>

<style scoped>
.infoContainer {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 15px;
}
.content {
    display: flex;
    margin-top: 15px;
    flex-direction: column;
}
.content .row {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    margin-top: 5px;
}
.content .row .val {
    width: 100%;
    right: 0px;
    font-size: 12px;
    text-align: right;
}

.content .row .title {
    color: #999;
    font-size: 12px;
    width: 90px;
}
</style>
